<template>
  <div class="container">
    <a-row v-if="title" class="item" type="flex">
      <a-col flex="auto" class="title">{{title}}</a-col>
      <a-col class="titleRight">
        <slot name="titleRight"></slot>
      </a-col>
    </a-row>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "BorderBox",
    props:{
      title:{
        type:String
      }
    }
  }
</script>

<style scoped>
  .container {
    border-radius: 8px;
    box-shadow: 1px 2px 8px 3px #ededed;;
    padding: 10px;
    margin: 5px;
  }
  .item {
    flex-flow: unset;
    padding: 10px 0;
    font-size: 14px;
  }
  .title{
    font-size: 16px;
    color: #333333;
    font-weight: bold;
  }
  .titleRight{
    cursor: pointer;
    color: #1890ff;
    font-weight: bold;
  }
</style>